import React, { useEffect,useState } from 'react';
import { Table, Button, Modal, message, Space, Tag } from 'antd';
import { observer } from 'mobx-react-lite';
import { agentStore } from './store/agentStore';
import AgentForm from './components/AgentForm';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { Agent } from './store/agentTypes';


const AgentList: React.FC = observer(() => {
  const [viewType, seViewType] = useState<'create' | 'edit' | 'view'>('create');

  useEffect(() => {
    agentStore.fetchOptions();
    agentStore.fetchAgents();
  }, []);

  const handleCreate = () => {
    seViewType('create');
    agentStore.showCreateModal();
  };

  const handleEdit = (agent: any) => {
    seViewType('edit');
    agentStore.showEditModal(agent);
  };

  const handleView = (agent: any) => {
    seViewType('view');
    agentStore.showEditModal(agent);
  };

  const handleDelete = async (id: string) => {
    try {
      await agentStore.deleteAgent(id);
      message.success('删除成功');
    } catch (error) {
      message.error('删除失败');
    }
  };

  const handleModalOk = async (values: any) => {
    try {
      await agentStore.saveAgent(values);
      message.success('保存成功');
    } catch (error) {
      message.error('保存失败');
    }
  };

  const renderModel = (model: string) => {
    const modelMap = agentStore.modelValues;
    const config = modelMap && modelMap[model as keyof typeof modelMap];
    return config ? <Tag color={config.color}>{config.title}</Tag> : null;
  };

  const columns = [
    {
      title: '智能体名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '智能体标识',
      dataIndex: 'identifier',
      key: 'identifier',
    },
    {
      title: '使用模型',
      dataIndex: 'modelUsage',
      key: 'modelUsage',
      render: (model: string) => renderModel(model),
    },
    {
      title: '是否流式输出',
      dataIndex: 'isStreaming',
      key: 'isStreaming',
      render: (value: String) => (value=='1' ? '是' : '否'),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: Agent) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handleView(record)}
          >
            查看
          </Button>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button
            type="link"
            disabled={true}
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      ),
    }
  ];

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" onClick={handleCreate}>
          创建智能体
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={Array.isArray(agentStore.agents) ? agentStore.agents : []}
        rowKey="id"
        loading={agentStore.loading}
        locale={{ emptyText: '暂无数据' }}
      />
      <Modal
        title={
          viewType === 'create'
            ? '新建智能体'
            : viewType === 'edit'
            ? '编辑智能体'
            : '查看智能体'
        }
        open={agentStore.modalVisible}
        onCancel={agentStore.hideModal}
        footer={null}
        width={800}
        destroyOnClose
        bodyStyle={{
          maxHeight: 'calc(100vh - 200px)',
          overflow: 'auto',
          padding: '24px'
        }}
      >
        <AgentForm
          initialValues={agentStore.editingAgent}
          type={viewType}
          onSubmit={handleModalOk}
          onCancel={agentStore.hideModal}
        />
      </Modal>
    </div>
  );
});

export default AgentList; 